<template>
  <div>
    贺宇飞
    <el-card>
      <el-button icon="el-icon-close" circle class="closeBtn" v-if="isShowVideoPlayerModal" @click="closeMediaPlayer">
      </el-button>
      <!-- 视频 -->
      <video-play ref="videoPlays" :visible="isShowVideoPlayerModal" @cancel="closeMediaPlayer" title="视频预览"
        v-if="isShowVideoPlayerModal">
      </video-play>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="searchref">
        <el-form-item label="关键字">
          <el-input v-model="formInline.keyword" placeholder="根据文章标题搜索"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clean">清除</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item class="filter-item fr">
          <el-button type="success" icon="el-icon-edit" @click="addData">新增技巧</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon :closable="false"></el-alert>

      <!-- 目录管理列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column label="文章标题">
          <template slot-scope="scope">
            <span>{{scope.row.title}}</span> <i class="el-icon-film" v-if="scope.row.videoURL"
              @click="dd(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数">
        </el-table-column>
        <el-table-column prop="username" label="录入人">
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            {{scope.row.createTime | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="preview(scope.row)">预览</el-button>
            <el-button type="text" v-if="scope.row.state===1" @click="jy(scope.row.id,scope.row.state)">禁用
            </el-button>
            <el-button type="text" v-else @click="qy(scope.row.id,scope.row.state)">启用</el-button>
            <el-button type="text" :disabled="scope.row.state===0" @click="editData(scope.row)">修改
            </el-button>
            <el-button type="text" :disabled="scope.row.state===0" @click="del(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.page" :page-sizes="[3,5,7,10]" :page-size="queryInfo.pagesize"
        layout=" prev, pager, next,sizes, jumper" :total="counts">
      </el-pagination>
    </el-card>
    <!-- 预览文章的对话框 -->
    <el-dialog title="预览文章" :visible.sync="preDialog" width="50%">
      <h2>{{preObj.title}}</h2>
      <el-row>
        <el-col :span="5">{{preObj.createTime | parseTimeByString}}</el-col>
        <el-col :span="3">{{preObj.username}}</el-col>
        <el-col :span="1"><i class="el-icon-view"></i></el-col>
        <el-col :span="4">{{preObj.visits}}</el-col>
      </el-row>

      <div class="main" v-html="preObj.articleBody"></div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
    <!-- 新增文章的对话框 -->
    <el-dialog title="新增文章" :visible.sync="addialog" width="50%" @click="btnCancel2">
      <el-form ref="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm" :model="addObj">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="addObj.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="addObj.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="addObj.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center">
          <el-button @click="btnCancel2">取 消</el-button>
          <el-button type="primary" @click="tt">确 定</el-button>
        </el-row>
      </span>
    </el-dialog>
    <!-- 修改文章的对话框 -->
    <el-dialog title="修改文章" :visible.sync="editialog" width="50%" @click="btnCancel">
      <el-form ref="editForm" :rules="editRules" label-width="80px" class="demo-ruleForm" :model="edobj">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="edobj.title" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="edobj.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="edobj.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row type="flex" justify="center">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </el-row>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, changeState, update } from '@/api/hmmm/articles.js'
import videoPlay from '@/components/Player.vue'
export default {
  data () {
    return {
      // 是否显示播放器
      isShowVideoPlayerModal: false,
      editObj: {}, // 修改文章对象
      preObj: {}, // 预览文章的数据对象
      // 新增文章对话框的表单数据对象
      addObj: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 修改文章对话框的表单数据对象
      edobj: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: 1
      },
      // 新增文章对话框表单校验规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ]
      },
      // 修改文章对话框表单校验规则
      editRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ]
      },
      // 文章搜素表单对象
      formInline: {
        keyword: '',
        state: ''
      },
      // 查询参数对象
      queryInfo: {
        pagesize: 10, // 每页显示条数
        page: 1 // 当前页码

      },
      counts: 0, // 总数据条数
      tableData: [], // 文章列表的数据(数组)
      centerDialogVisible: false,
      preDialog: false, // 预览文章对话框的显示与隐藏
      addialog: false, // 新增文章的对话框显示与隐藏
      editialog: false // 修改文章的对话框显示与隐藏
    }
  },
  methods: {
    // 媒体预览
    previewMedia (url) {
      const playUrl = url
      // 获取播放器组件实例并调用播放方法进行播放
      this.$refs.videoPlays.play(playUrl)
    },
    // 关闭媒体播放器
    closeMediaPlayer () {
      this.isShowVideoPlayerModal = false
    },
    async getList (data) {
      const { data: res } = await list(data)
      this.tableData = res.items
      this.queryInfo.pagesize = res.pagesize * 1// 每页显示条数
      this.queryInfo.page = res.page * 1// 当前页码
      this.counts = res.counts // 总数据条数
    },
    // 选择条数下拉框，按照选择的条数且回到第一页进行查询，更新列表。
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      this.getList(this.queryInfo)
    },
    // 点击分页按钮，按照按钮的页码进行查询，更新列表。
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getList(this.queryInfo)
    },
    // 点击清除按钮，清空关键字输入框
    clean () {
      this.formInline = {
        directoryName: '',
        state: ''
      }
      this.getList()
    },
    // 点击筛选按钮,按照用户输入的目录名称和选择的状态且回到第一页进行查询,更新列表
    onSubmit () {
      this.getList(this.formInline)
    },
    // 点击图标弹出视频
    dd (row) {
      this.isShowVideoPlayerModal = true
      this.$nextTick(() => {
        this.previewMedia(row.videoURL)
      })
    },
    // 点击预览按钮，预览文章的对话框出现
    preview (row) {
      this.preDialog = true
      this.preObj = row
    },
    // 点击删除按钮,删除文章
    async del (id) {
      const res = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const qq = await remove({ id: id })
      if (qq.status !== 200) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      this.getList()
    },
    // 点击新增按钮,新增文章
    addData () {
      this.addialog = true
    },
    // 点击修改按钮,新增文章
    editData (row) {
      this.editialog = true
      this.edobj = { ...row }
    },
    // 点击确定按钮,提交修改请求
    edit () {
      this.$refs.editForm.validate(async valid => {
        if (!valid === true) {
          return this.$message.info('校验失败')
        }
        const res = await update(this.edobj)
        if (res.status !== 200) {
          return this.$message.info('修改文章失败')
        }
        this.$message.success('修改文章成功')
        this.getList()
        this.editialog = false
      })
    },
    // 点击确定按钮,提交新增请求
    tt () {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid === true) {
          return this.$message.info('校验失败')
        }
        const res = await add(this.addObj)
        if (res.status !== 200) {
          return this.$message.info('新增文章失败')
        }
        this.$message.success('新增文章成功')
        this.getList()
        this.addialog = false
      })
    },
    // 点击禁用按钮
    async jy (id, state) {
      const res = await changeState({
        id: id,
        state: state === 0 ? 1 : 0
      })
      if (res.status !== 200) {
        return this.$message.info('操作失败')
      }
      this.$message.success('操作成功')
      this.getList()
    },
    // 点击启用按钮
    async qy (id, state) {
      const res = await changeState({
        id: id,
        state: state === 1 ? 0 : 1
      })
      if (res.status !== 200) {
        return this.$message.info('操作失败')
      }
      this.$message.success('操作成功')
      this.getList()
    },
    btnCancel () {
      this.$refs.editForm.resetFields()
      this.editialog = false
    },
    btnCancel2 () {
      this.$refs.ruleForm.resetFields()
      this.addialog = false
      this.addObj.videoURL = ''
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    // 组件注册
    videoPlay
  },
  created () { this.getList() },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-alert {
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-icon-film {
  color: blue;
}
.el-dialog__body {
  padding: 0;
}
.el-icon-circle-close {
  font-size: 40px;
}
.main {
  width: 100%;
  border-bottom: 1px dashed #cccccc;
  border-top: 1px dashed #cccccc;
  background-color: #f5f5f5;
  color: #606266;
  margin: 10px 0 0 0;
}
.closeBtn {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 20;
  color: rgb(255, 255, 255);
  background-color: rgba(129, 117, 117, 0.637);
}
</style>
